<template>
	<div class="menu-add">
		<el-form ref="form" :model="form" :rules="rules" style="width:80%">
			<el-form-item label="类型" prop="type" label-width="200px">
				<el-radio-group v-model="form.type" @change="changeType">
					<el-radio :label="1">目录</el-radio>
					<el-radio :label="2">菜单</el-radio>
					<el-radio :label="3">按钮</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="菜单名称" prop="title" label-width="200px">
				<el-input v-model="form.title" placeholder="请输入菜单名称"></el-input>
			</el-form-item>
			<el-form-item label="所属菜单" prop="pid" label-width="200px">
				<el-select v-model="form.pid" @change="changePid" placeholder="请选择" style="width:100%">
					<el-option v-if="dataTree.length>0" v-for="(item,key) in dataTree" :key="key" :label="item.title" :value="item.id"
					 :disabled="form.pid!=item.id && form.id!=item.id?false:true">
					 
						<span style="float: left">
							{{`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`.repeat(item.level-1<0?0:item.level-1||0)}}
							<i class="el-icon-arrow-right" v-if="item.level"></i>
							{{item.title}}
						</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="接口URL" prop="path" label-width="200px">
				<el-input v-model="form.path" placeholder="请输入接口URL"></el-input>
			</el-form-item>
			<el-form-item label="图标icon" prop="icon" label-width="200px">
				<!-- <el-input v-model="form.icon" placeholder="请输入图标"></el-input> -->
				<e-icon-picker v-model="form.icon"/>
			</el-form-item>
			<el-form-item label="name" prop="name" label-width="200px">
				<el-input v-model="form.name" placeholder="请输入name 必须与前端 vue 路由 name 一致且唯一，类型为菜单时必须填写"></el-input>
				<span style="color:red;font-size:12px">* name 必须与前端 vue 路由 name 一致且唯一，（类型为菜单时必须填写）</span>
			</el-form-item>
			<template v-if="form.type!=1">
				<el-form-item label="授权标识" prop="perms" label-width="200px">
					<el-input v-model="form.perms" placeholder="请输入授权标识，如：sys:user:add"></el-input>
					<span style="color:red;font-size:12px">* 类型为按钮时，必须填写授权标识</span>
				</el-form-item>
				<el-form-item label="请求方式" prop="method" label-width="200px">
					<el-input v-model="form.method" placeholder="请输入请求方式，如：GET，POST，PUT，DELETE"></el-input>
				</el-form-item>
				<el-form-item label="按钮标识" prop="code" label-width="200px">
					<el-input v-model="form.code" placeholder="请输入按钮标识，如：btn-dept-delete"></el-input>
					<span style="font-size:12px"><i style="color:red;padding-right:2px">* </i>按钮标识，主要用于前端按钮权限的显示与隐藏</span>
				</el-form-item>
			</template>
			<el-form-item label="排序码" prop="orderNum" label-width="200px">
				<el-input v-model="form.orderNum" placeholder="请输入排序码"></el-input>
			</el-form-item>
			<el-form-item label-width="200px">
				<el-button :loading="loading" type="primary" @click="submit">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import {
		getDataTree,
		add
	} from '@/api/sys/menus'

	export default {
		name: 'menu-add',
		data() {
			return {
				loading: false,
				dataTree: [],
				form: {
					type: 1,
					title: '',
					pid: 0,
					path: '',
					name: '',
					icon: '',
					perms: '',
					method: '',
					code: '',
					orderNum: 0,
				},
				rules: {
					type: [{
						required: true,
						message: '请输入类型',
						trigger: 'blur'
					}, ],
					title: [{
							required: true,
							message: '请输入菜单名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: '长度在 1 到 10 个字符',
							trigger: 'blur'
						}
					],
					pid: [{
						required: true,
						message: '请输入所属菜单',
						trigger: 'blur'
					}, ],
					url: [{
							required: true,
							message: '请输入接口URL',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 255,
							message: '长度在 1 到 255 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		created() {
			this.$nextTick(() => this.request(getDataTree, {}, this, data => {
				let dataList = this.treeToList(data)
				data[0].level = 0
				dataList.splice(0,0,data[0])
				this.dataTree = dataList
			}, false));
		},
		methods: {
			/**
			 * 树转list
			 */
			treeToList(tree) {
				let list;
				let level= 0;
				for (let i in tree) {
					let node = tree[i];
					list = []; //结果list
					if (node.children.length !== 0) { //遍历树的第一层,只有一个根结点
						//第一层加入到list中,因为根结点模块设置为虚拟结点,所以不用加入
						/*list.push({
						    id: node.id,
						    name: node.title,
						    parentId:node.parentId
						});*/
						this.toListDF(node.children, list, node.id, level); //遍历子树,并加入到list中.
					}
				}
				return list;
			},
			
			/**
			 * 深度优先遍历树
			 * 一个递归方法
			 * @params tree:要转换的树结构数据
			 * @params list:保存结果的列表结构数据，初始传list = []
			 * @params parentId:当前遍历节点的父级节点id，初始为null(因为根节点无parentId)
			 **/
			toListDF(tree, list, parentId, level) {
				level++;
				for (var i in tree) { //遍历最上层
					//将当前树放入list中
					var node = tree[i];
					list.push({
						id: node.id,
						icon: node.icon,
						path: node.path,
						name: node.title,
						title: node.title,
						level:level
					});
					//如果有子结点,再遍历子结点
					if (node.children.length !== 0) {
						this.toListDF(node.children, list, node.id ,level) //递归
					}
				}
			},
			changeType(val) {
				this.form.type = val;
			},
			changePid(val) {
				this.form.pid = val;
			},
			submit() {
				this.loading = true;
				this.handleSubmit(add, this.$refs['form'], this, data => {
					this.loading = false;
					this.$emit('handleGetTableData');
				}, true);
			}
		}
	}
</script>
<style lang="css" scoped>

</style>
